<!DOCTYPE html>
<html class="x-admin-sm">
 <head>
     <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                    	<!-- 这个div是模糊查询form布局的div -->
                        <div class="layui-card-body ">
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn" onclick="xadmin.open('新建地址','/foreground/PersonalCenter/address/address-add.html',800,600)">
                                <i class="layui-icon"></i>添加
                            </button>
                        </div>
                        <div class="layui-card-body ">
                        	<!-- table 中的id 是用来绑定datagrid数据表格的  lay-filter 用来绑定监听数据表格中的按钮时间的 比如 每一行数据的操作列中 的查询详情  修改  删除功能 监听就需要用到 lay-filter -->
                            <table class="layui-table layui-form" id="test" lay-filter="AddressTble"> </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
//layui table 渲染绑定
	layui.use('table', function() {
		
	var table = layui.table;
	table.render({
		elem : '#test',//table元素的id
		id : "addressId",
		url : '/../address/list',
		page : true //开启分页
		,
		limit : 5 // 一页多少条
		,
		limits : [ 5, 10, 15, 20 ] // 数据分页条
		,
		cols : [ [   
			 {
			field : 'addrName',
			title : '地址名',
		}, {
			field : '',
			title : '操作',
			toolbar : '#barDemo'
		} ] ]
	});
	
	
	
	/* //模糊分页查询
	$('#query').on('click', function() {
		// 重新加载数据表格
		table.reload("userDataId",{
			page : {
				curr : 1
			},
			//where 就是对这个表格设置查询条件的  它都是 一key  value 的方式来的
			where : {
				usrName : $("#usrName").val(),
			}
		})
	}); */
	
	
	//监听工具条 tool 关键字必须要的， 也就是tool监听行级工具栏的 tool(这里面的值就是table表格中的lay-filter属性的值  也就是 lay-filter="dictTable")
	table.on('tool(AddressTble)', function(obj) {
		//获取的这一行数据
		var data = obj.data;
		
		//obj.event 是菜单按钮的lay-event属性值 lay-event="edit"
		if (obj.event === 'del') {
			layer.confirm('真的删除行么', function(index) {
				$.ajax({
		            //请求方式
		            type : "POST",
		            //请求的媒体类型
		            //contentType: "application/json;charset=UTF-8",
		            //请求地址
		            url : "/../address/del",
		            //数据，(json字符串 JSON.stringify(data)),
		            data : {"addrId":data.addrId},
		            //请求成功
		            success : function(result) {
		            	if(result>0){
		            		//发异步，把数据提交给
							layer.alert("删除成功", {
								icon : 6
							});
		            	}else{
		            		//发异步，把数据提交给php
							layer.alert("删除失败！", {
								icon : 6
							});
		            	}
		            }
		        });
				//更新和刷新删除 缓存和表格
				obj.del();
				layer.close(index);
				//location.reload();
			});
		} else if (obj.event === 'edit') {
			
			//layer.alert('编辑行：<br>' + JSON.stringify(data));
			//window的表单数据对象， 可用于页面之间值传输 
			
			//把这一行需要修改的数据 ，暂时存储到 系统的formData中 
			window.formData = data;
			
			layer.open({
				// 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）
		        type: 2 
		        ,title: '编辑地址'
		        // 当type: 2 时就是url，content
		        ,content: '/foreground/PersonalCenter/address/address-update.html'
		        // 宽高：如果是100%就是满屏
		        ,area:['100%', '100%']
				//缩小和还原工具栏
				,maxmin: true
			    ,offset:'t'
		        ,success:function(layero,index){
		        }
		    });		
		}
	});
	
});
    </script>
    
</html>